import React, { useState, useEffect } from 'react';
import './ReadRecord.css';
import TopBar from '../TopBar/TopBar';
import { message } from 'antd';
import { shelf } from '../../assets/api/booksdetail';

export default function ReadRecord(props) {
    const [readrecordlist, setreadrecordlist] = useState([]);
    useEffect(() => {
        let newlist = [];
        if (props.reading.length !== 0) {
            props.reading.forEach(ele => {
                newlist.push({ id: ele.id, type: "book" })
            });
        }
        if (newlist.length !== 0) {
            shelf({ ids: JSON.stringify(newlist) }).then(data => {
                data.data.list.forEach(ele => {
                    ele.check = false;
                })
                message.destroy(1);
                setreadrecordlist(data.data.list);
            })
        } else {
            message.destroy(1);
        }
    }, [props.reading]);

    return (
        <div className={'readrecordbox ' + (props.show ? "show" : "")}>
            <TopBar title="阅读记录" back={props.hiderecord} />
            <div className="blankbox"></div>
            <div className="readrecordbottom">
                {
                    readrecordlist.length!==0?readrecordlist.map((ele, index) => 
                        <div key={index} className="readrecordminbox">
                            <div className="face">
                                <img src={ele.cover} alt="" />
                            </div>
                            <div className="minboxcontent" key={index}>
                                <div className="contenttitle">{ele.title}</div>
                                <div className="contenauthor">{ele.author}</div>
                            </div>
                        </div>
                    ):<div className='none'>暂无阅读记录</div>
                }

            </div>
        </div>
    );
}
